<template>
	<div class="pro">
		<div>
			<img class="pro_img" :src="src" />
		</div>
		<div class="title" _v-3a2b3e2d=""> 
			<span class="main-title" _v-3a2b3e2d="">PC来做课</span> 
			<span class="seperator" _v-3a2b3e2d="">|</span> 
			<span class="subtitle" _v-3a2b3e2d="">课程采购成本高？自制课件质量差？
			<br _v-3a2b3e2d="">教你如何制作出高质量的专业动画课件。</span> 
		</div>
		<div class="flex pro_mar" style="margin-top: 20px;">
			<div class="pro_left" @click="bullet(img1,'1')">
				<img :src="img1" />
				<div class="bottom" _v-3a2b3e2d=""> 
					<div class="item-title" _v-3a2b3e2d="">新手必学</div> 
					<div class="desc" _v-3a2b3e2d="">了解PC来做课的各个编辑功能的应用，以及如何快速制作发布课件。</div> 
				</div>
			</div>
			<div class="pro_left" @click="bullet(img2,'2')">
				<img :src="img2" />
				<div class="bottom" _v-3a2b3e2d=""> 
					<div class="item-title" _v-3a2b3e2d="">教你一分钟做课</div> 
					<div class="desc" _v-3a2b3e2d="">快速入门，教你一分钟制作课件。</div> 
				</div>
			</div>
			<div class="pro_left">
				<img src="https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/moreTutorial.328d137.jpg
" />
				<div class="bottom"  _v-3a2b3e2d=""> 
					<div class="item-title" style="text-align: center;margin-top: 30px;" _v-3a2b3e2d="">更多教程敬请期待</div> 
				</div>
			</div>
		</div>
		<div class="title" _v-3a2b3e2d="">
					<span class="main-title" _v-3a2b3e2d="">移动来做课</span> 
					<span class="seperator" _v-3a2b3e2d="">|</span> 
					<span class="subtitle" _v-3a2b3e2d="">极简课件的制作方式，只需一部手机，
					<br _v-3a2b3e2d="">随时随地制作专业课件。</span> 
				</div>
				<div class="flex pro_mar" style="margin-top: 20px;">
					<div class="pro_left" @click="bullet(img3,'3')">
						<img :src="img3" />
						<div class="bottom" _v-3a2b3e2d=""> 
							<div class="item-title" _v-3a2b3e2d="">视频做客</div> 
							<div class="desc" _v-3a2b3e2d="">移动来做课教程，一步步教你用手机制作视频课件。</div> 
						</div>
					</div>
					<div class="pro_left" @click="bullet(img4,'4')">
						<img :src="img4" />
						<div class="bottom" _v-3a2b3e2d=""> 
							<div class="item-title" _v-3a2b3e2d="">音频课件制作</div> 
							<div class="desc" _v-3a2b3e2d="">像喜马拉雅、得到那样的音频课件，你也可以轻松做出。</div> 
						</div>
					</div>
					<div class="pro_left">
						<img src="https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/moreTutorial.328d137.jpg
		" />
						<div class="bottom"  _v-3a2b3e2d=""> 
							<div class="item-title" style="text-align: center;margin-top: 30px;" _v-3a2b3e2d="">更多教程敬请期待</div> 
						</div>
					</div>
				</div>
		<div class="title" _v-3a2b3e2d="" >
					<span class="main-title" _v-3a2b3e2d="">课堂游戏</span> 
					<span class="seperator" _v-3a2b3e2d="">|</span> 
					<span class="subtitle" _v-3a2b3e2d="">面授教学过程枯燥乏味？远程培训缺乏互动？
					<br _v-3a2b3e2d="">课堂游戏助你轻松hold住全场。</span> 
		</div>
		<div class="flex pro_mar" style="margin-top: 20px;">
			<div class="pro_left" @click="bullet(img5,'5')">
				<img :src="img5" />
				<div class="bottom" _v-3a2b3e2d=""> 
					<div class="item-title" _v-3a2b3e2d="">游戏指南</div> 
					<div class="desc" _v-3a2b3e2d="">做创建游戏到开始游戏，看完本教程，课堂互动再也不愁了。</div> 
				</div>
			</div>
			<div class="pro_left">
				<img src="https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/moreTutorial.328d137.jpg
" />
				<div class="bottom"  _v-3a2b3e2d=""> 
					<div class="item-title" style="text-align: center; margin-top: 30px;" _v-3a2b3e2d="">更多教程敬请期待</div> 
				</div>
			</div>
		</div>
		<el-dialog width="1020px" :visible.sync="dialog" :before-close="close">
			<div class="tan" v-if="ico == 0">
				<img :src="imgUrl" />
				<div class="start" _v-26a65280="" @click="ico = 1">开始学习</div>
				<div class="tui" _v-26a65280="" @click="dialog = false">退出</div>
			</div>
			<div class="tan" v-else>
				<img src="https://mlearning-tools.pingan.com.cn/learn/cwtools/static/images/newguide/bg_model01.jpg" />
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				src:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/images/tutorial/banner.jpg',
				dialog:false,
				img1:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/fleshman.0573efe.jpg',
				img2:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/oneMinute.95ce165.jpg',
				img3:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/videoTutorial.fbfc004.jpg',
				img4:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/audioTutorial.358586a.jpg',
				img5:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/gameTutorial.8d5c538.jpg',
				imgUrl:'',
				ip1:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/startBG-p.d8181cf.jpg',
				ip2:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/startBG.74b8a3c.jpg',
				ip3:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/startPhoneBG.0d3321a.jpg',
				ip4:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/startAudioBG.56dd2ec.png',
				ip5:'https://mlearning-tools.pingan.com.cn/learn/cwtools/static/img/startGameBG.b90e8a5.jpg',
				num:'0',
				ico:0
			}
		},
		watch:{
			num(val, oldVal){
				console.log('val',val)
				console.log('oldVal',oldVal)
			}
		},
		methods: {
			close(){
				this.ico = 0
				this.dialog = false
			},
			//点击弹窗
			bullet(i,index){
				console.log(i,index)
				if(index == 5){
					this.imgUrl = this.ip5
				} else if(index == 4){
					this.imgUrl = this.ip4
				}
				else if(index == 3){
					this.imgUrl = this.ip3
				}
				else if(index == 2){
					this.imgUrl = this.ip2
				}
				else if(index == 1){
					this.imgUrl = this.ip1
				}
				
				
				this.dialog = true
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.start {
	   width: 258px;
	   height: 70px;
	   font-size: 26px;
	   border-radius: 35px;
	   border: 2px solid #123095;
	   background-color: #529ce6;
	   z-index: 100;
	   position: absolute;
	   right:70px;
	   color: #FFFFFF;
	   bottom: 200px;
	   text-align: center;
	   line-height: 70px;
	}
	.tui{
		width: 258px;
		height: 70px;
		font-size: 26px;
		border: 2px solid #123095;
		background-color: #45cfc7;
		border-radius: 35px;
		z-index: 100;
		position: absolute;
		right:70px;
		color: #FFFFFF;
		bottom: 100px;
		text-align: center;
		line-height: 70px;
	}
	.tan{
		img{
			width: 100%;
			height: 594px;
		}
	}
	.pro_mar{
	}
	.bottom[_v-3a2b3e2d] {
	    width: 330px;
	    margin-left: 20px;
	    margin-top: 13px;
	}
	.bottom .desc[_v-3a2b3e2d] {
	    margin-top: 10px;
	    font-size: 14px;
	}
	.bottom .item-title[_v-3a2b3e2d] {
	    font-size: 21px;
	}
	.pro_left:last-child{
		margin-right: 0;
	}
	.pro_left{
		cursor: pointer;
		width: 368px;
		margin-right: 25px;
		height: 285px;
		border-radius: 5px;
		img{
			width: 100%;
			height: 186px;
			border-radius: 5px 5px 0 0;
			border-bottom: 1px solid #dbdbdb;
		}
		border: 1px solid #dddddd;
	}
	.pro_img{
		width: 100%;
		height: 240px;
	}
	.title[_v-3a2b3e2d] {
	    height: 65px;
	    border: 1px solid #dbdbdb;
	    background-color: #fff;
		margin-top: 20px;
	}
	.subtitle[_v-3a2b3e2d] {
	    display: inline-block;
	    vertical-align: top;
	    height: 34px;
	    font-size: 14px;
	    padding-top: 16px;
	    padding-left: 15px;
	}
	.main-title[_v-3a2b3e2d], .seperator[_v-3a2b3e2d] {
	    font-size: 30px;
	    color: #000;
	}
	.main-title[_v-3a2b3e2d] {
	    padding-left: 25px;
	    padding-right: 15px;
	    height: 65px;
	    line-height: 65px;
	}
	.pro{
		width: 1160px;
		margin: 0 auto;
	}
</style>
